{% extends "index.html" %}

{% block css-javascript-agregados %}
    <link 	type="text/css" 		href="static/ui.sexyselect/css/ui.sexyselect.0.55.css" 			rel="stylesheet"/>
    <script type="text/javascript" 	src="static/ui.sexyselect/js/ui.sexyselect.min.0.6.js" >		</script>
{% endblock %}

{% block content %}
    <div id="container_upper" style="width: 97%">
        <div class="row">
            <span class="left"><img class="img_border" width="128px" height="128px" src="{{objuser.get_profile.foto.url}}"/></span>
            <br/>
            <h5>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Asignar Cargos a {{objuser.first_name}} {{objuser.last_name}}</h5>
        </div>
    </div>

	{% if user.is_superuser %}
    <br>
    <br>
    <br>
	&nbsp;&nbsp;&nbsp;<button class="center" onclick="location.href='{% url comunidadcyt.cargoAcademico.views.inicio %}'">Crear Nuevos Cargos</button>
    <br>


    {% if available_cargos or assigned_cargos %}
        <div id="container_existentes" style="width:97%">
            <div class="row">
                <form name="formulario" method="GET">{% csrf_token %}

                    <select id="available_cargos" multiple="true" name="available_cargos">
                        {% for cargo in available_cargos %}
                            <option value="{{cargo}}">{{cargo}}</option>
                        {% endfor %}
                    </select>

                    <div id="medio" class="center">
                        <button class="center" onclick="asignar()"><span class="ui-icon ui-icon-circle-arrow-s"></span></button>
                        <button class="center" onclick="quitar()"><span class="ui-icon ui-icon-circle-arrow-n"></span></button>
                    </div>

                    <select id="assigned_cargos" multiple="true" name="assigned_cargos">
                        {% for cargo in assigned_cargos %}
                            <option value="{{cargo}}">{{cargo}}</option>
                        {% endfor %}
                    </select>
                </form>
            </div>
        </div>
    {% endif %}

    <script type="text/javascript">
        function quitar() {
            document.forms["formulario"].action="/comunidadcyt/accounts/cargos/remove/{{objuser.id}}";
            document.forms["formulario"].submit();
            return false;
        }
        function asignar() {
            document.forms["formulario"].action="/comunidadcyt/accounts/cargos/assign/{{objuser.id}}";
            document.forms["formulario"].submit();
            return false;
        }

        $("a.asscargos_add").button({icons:{primary:'ui-icon-gear'}});
        $("a.asscargos_rem").button({icons:{primary:'ui-icon-minus'}});
        $('#assigned_cargos').sexyselect({ title: 'Cargos Asignados',
            allowInput: false,
            allowFilter: true,
            allowDelete: false,
            width: '300'
        });
        $('#available_cargos').sexyselect({ title: 'Cargos Existentes',
            allowInput: false,
            allowFilter: true,
            allowDelete: false,
            width: '300'
        });
    </script>
	{% endif %}
{% endblock %}